<template>
  <div class="about">
    <img alt="Vue logo" src="@/assets/logo.png" />
    <br />

    <button @click="handleInputClear">点击清空input</button>
    <br />
    <button @click="config.isShowLink = !config.isShowLink">
      {{ config.isShowLink ? "不显示" : "显示" }}相关链接
    </button>

    <HelloWorld
      ref="helloWorld"
      :msg="msg"
      :config="config"
      :list="list"
      @handleInput="handleInput"
    >
      <template v-slot>
        <h1>测试默认插槽</h1>
      </template>

      <template v-slot:test1>
        <h1>测试命名插槽</h1>
      </template>

      <template v-slot:testParam="{ param }">
        <h1>测试插槽参数：{{ param }}</h1>
      </template>
    </HelloWorld>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorldByTemplate/index.vue";
import EventBus from "@/utils/EventBus";
import {
  MsgProp,
  ConfigProp,
  ListProp,
} from "@/components/HelloWorldByTemplate/type";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "ByTemplate",

  components: { HelloWorld },

  data() {
    return {
      msg: "简单的参数传递" as MsgProp,
      config: {
        isShowLink: false,
      } as ConfigProp,
      list: [
        { id: 1, name: "fanzhiliang", age: 25 },
        { id: 2, name: "alcyh", age: 26 },
      ] as ListProp,
    };
  },

  mounted() {
    EventBus.$emit("ON_MOUNTED", useRouter().currentRoute.value.name);
  },

  methods: {
    // 监听输入
    handleInput(val: any) {
      console.log(val);
    },

    // 清空输入框
    handleInputClear() {
      (this.$refs.helloWorld as any).handleInputClear();
    },
  },
});
</script>
